import { Col, Row, message } from 'antd';
import Layout, { Content, Footer, Header } from 'antd/lib/layout/layout';
import { saveAs } from 'file-saver';
import { connect } from 'umi';

import type { FC } from 'react';

import BaseDiv from '@/components/baseDiv';
import HeaderBar from '@/components/header';
import type { IReduxState } from '@/models/global';
import { namespace } from '@/models/global';
import PersonCenter from '@/pages/PersonCenter';

import Customized from './Customized';
import FirstPage from './FirstPage';
import styles from './index.less';
import Price from './Price';

const mapStateToProps = (state: { [namespace]: IReduxState }) => {
  return {
    ...state[namespace],
  };
};
export type Props = ReturnType<typeof mapStateToProps>;

const DefaultPage: FC<Props> = (props) => {
  const { currentMenu } = props;
  // const dispatch = useDispatch();
  const boxstyles: React.CSSProperties = {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  };
  const baseStyles: React.CSSProperties = {
    height: 325,
    background: '#F8F9FC',
  };

  return (
    <Layout className={styles.mainContent}>
      <Header className={styles.coverHeader}>
        <HeaderBar />
      </Header>
      <Layout>
        <Content>
          {currentMenu === 'product' ? (
            <FirstPage />
          ) : currentMenu === 'price' ? (
            <Price />
          ) : currentMenu === 'custom' ? (
            <Customized />
          ) : currentMenu === 'personCenter' ? (
            <PersonCenter />
          ) : (
            <FirstPage />
          )}
        </Content>
      </Layout>
      {currentMenu !== 'personCenter' && (
        <Footer>
          <BaseDiv baseStyles={baseStyles} boxStyles={boxstyles}>
            <div className={styles.contact}>联系我们</div>
            <div className={styles.mess}>
              我们准备随时为您提供专业的精益生产与企业数字化转型咨询服务 欢迎与我们保持沟通
            </div>
            <div className={styles.phoneNumber}>400 009 6916</div>
          </BaseDiv>
          <BaseDiv baseStyles={{ height: 284 }}>
            <Row gutter={16} className={styles.rowStyle}>
              <Col span={8}>
                <div className={styles.menuStyle}>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.totalStyle}
                  >
                    下载
                  </div>
                  <div
                    onClick={() => {
                      saveAs('/api/Asset/Download/2022040114493015743512888266752', '安灯移动端.apk');
                      // window.open('/api/Asset/Download/2022040114493015743512888266752');
                    }}
                    className={styles.fontStyle}
                  >
                    Andon
                    移动端APP
                  </div>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.fontStyle}
                  >
                    操作手册
                  </div>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.fontStyle}
                  >
                    其他插件
                  </div>
                </div>
                <div className={styles.copyRight}>版权所有：2022江苏芍园科技有限责任公司</div>
              </Col>
              <Col span={8}>
                <div className={styles.menuStyle}>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.totalStyle}
                  >
                    关注我们
                  </div>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.fontStyle}
                  >
                    关于我们
                  </div>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.fontStyle}
                  >
                    微信公众号
                  </div>
                  <div />
                </div>
              </Col>
              <Col span={8}>
                <div className={styles.menuStyle}>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.totalStyle}
                  >
                    取得联系
                  </div>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.fontStyle}
                  >
                    服务热线：400 009 6916
                  </div>
                  <div
                    onClick={() => {
                      message.info('暂无此功能');
                    }}
                    className={styles.fontStyle}
                  >
                    意见反馈
                  </div>
                  <div />
                </div>
              </Col>
            </Row>
          </BaseDiv>
        </Footer>
      )}
    </Layout>
  );
};

export default connect(mapStateToProps)(DefaultPage);
